/* ============================================================
   CHRIS PERRY PORTFOLIO — SHARED DESIGN SYSTEM
   Extracted from index.html so every case study page renders
   with the same aesthetic. Source of truth for tokens, base,
   chrome (nav/footer), buttons, section utilities, and the
   light/dark theme system.
   ============================================================ */


/* ─── CSS VARIABLES (DARK = DEFAULT) ────────────────────────── */
:root {
  --void:          #060608;
  --bg:            #0D0D11;
  --deep:          #0c0c12;
  --surface:       #12121c;
  --panel:         #1a1a28;
  --glass:         rgba(255,255,255,0.035);
  --glass-border:  rgba(200,169,110,0.14);
  --gold:          #C8A96E;
  --gold-light:    #E2C98A;
  --gold-bright:   #e8c97e;
  --gold-dim:      rgba(200,169,110,0.22);
  --rust:          #c4572a;
  --teal:          #5a9e9e;
  --white:         #F0EDE8;
  --muted:         rgba(232,228,220,0.62);
  --faint:         rgba(232,228,220,0.07);
  --border:        rgba(255,255,255,0.06);
  --radius:        16px;
  --radius-lg:     24px;
  --transition:    0.55s cubic-bezier(0.16, 1, 0.3, 1);
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── TYPOGRAPHY SCALE (Phase 1 — M2) ─────────────────────
     Modular scale with ≥3:1 ratio between H2 and body.
     Display: 56–80px | H2: 40–48px | H3: 24–28px
     Body lg: 18px    | Body: 16px  | Small: 14px | Label: 12–13px
     ─────────────────────────────────────────────────────── */
  --fs-display:   clamp(3.5rem, 6.5vw, 5rem);      /* 56–80px — hero name */
  --fs-h1:        clamp(2.75rem, 5vw, 3.75rem);    /* 44–60px — page h1 */
  --fs-h2:        clamp(2.5rem, 4vw, 3rem);        /* 40–48px — section title */
  --fs-h3:        clamp(1.5rem, 2vw, 1.75rem);     /* 24–28px — subsection */
  --fs-body-lg:   1.125rem;                        /* 18px — taglines, lead copy */
  --fs-body:      1rem;                            /* 16px — body baseline */
  --fs-small:     0.875rem;                        /* 14px — small text */
  --fs-label:     0.75rem;                         /* 12px — labels, metadata */
  --fs-label-lg:  0.8125rem;                       /* 13px — emphasized labels */

  --lh-tight:     1.1;       /* display + h2 */
  --lh-snug:      1.25;      /* h3 */
  --lh-body:      1.65;      /* body copy */
  --lh-relaxed:   1.8;       /* longer-form / italic sub */

  /* ─── SECTION TIER PALETTE (Phase 1 — M1a) ─────────────────
     Three tiers of section weight plus a deep anchor for
     contrast punctuation. Dark theme values below; the light
     theme block re-maps them to warm beiges + a deep brown. */
  --section-bg-hero:        var(--void);            /* tier 1 — most presence */
  --section-bg-anchor:      var(--surface);         /* tier 2 — mid-tone */
  --section-bg-supporting:  var(--bg);              /* tier 3 — lightest field */
  --section-bg-dark-anchor: #14100c;                /* contrast punctuation — warm near-black */
  --section-text-on-dark:   #F0EDE8;                /* light text for hero/dark-anchor */
  --section-muted-on-dark:  rgba(240,237,232,0.65);
  --section-border-on-dark: rgba(255,255,255,0.08);

  /* Section spacing rhythm */
  --section-pad-y:          clamp(80px, 10vw, 140px);
  --section-pad-y-tight:    clamp(56px, 7vw, 96px);
  --section-pad-y-loose:    clamp(120px, 14vw, 180px);
  --section-gap:            clamp(80px, 10vw, 120px);
}

/* ─── LIGHT THEME VARIABLES ────────────────────────────────── */
html[data-theme="light"] {
  --void:         #ffffff;
  --bg:           #fdf6ef;
  --deep:         #f7ece2;
  --surface:      #f0e1d3;
  --panel:        #e8d2be;
  --glass:        rgba(53,24,24,0.04);
  --glass-border: rgba(151,84,84,0.22);
  --white:        #351818;
  --muted:        rgba(53,24,24,0.68);  /* M3: bumped from 0.58 → 0.68 for WCAG AA (5.52:1 on #fdf6ef) */
  --faint:        rgba(53,24,24,0.08);
  --border:       rgba(53,24,24,0.1);

  /* Alpha-modified bg values — can't derive from --bg with plain CSS */
  --bg-glass:   rgba(253,246,239,0.62);  /* nav glass */
  --bg-overlay: rgba(253,246,239,0.96);  /* mobile menu overlay */
  /* Light-mode accent not present in dark palette */
  --rust-mid:   #975454;

  /* Section tier remap for light theme (Phase 1 — M1a) */
  --section-bg-hero:        #2a1410;        /* deep warm brown — tier 1, max presence */
  --section-bg-anchor:      var(--deep);    /* warm beige #f7ece2 — tier 2 */
  --section-bg-supporting:  var(--bg);      /* lightest cream #fdf6ef — tier 3 */
  --section-bg-dark-anchor: #2a1410;        /* matches hero — for CTA closure / contrast */
  --section-text-on-dark:   #F0EDE8;
  --section-muted-on-dark:  rgba(240,237,232,0.7);
  --section-border-on-dark: rgba(255,255,255,0.12);
}

html[data-theme="light"] body { background: var(--bg); color: var(--white); }
html[data-theme="light"] nav {
  background: var(--bg-glass);
  border-color: var(--border);
  box-shadow: 0 4px 32px rgba(53,24,24,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
}
html[data-theme="light"] body::before { opacity: 0.12; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(151,84,84,0.3); }
html[data-theme="light"] #cursor { mix-blend-mode: multiply; }


/* ─── RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  cursor: none;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ─── HEADING DEFAULTS (Phase 1 — M2) ───────────────────────
   Base sizes tied to the modular scale. Component classes
   (.section-title, .hero-name, etc.) override where needed. */
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-body-lg); line-height: var(--lh-snug); }
h5,
h6 { font-size: var(--fs-body); line-height: var(--lh-snug); }
small,
.text-small { font-size: var(--fs-small); }
.text-label { font-size: var(--fs-label); letter-spacing: 0.32em; text-transform: uppercase; }

/* ─── FOCUS VISIBLE ─────────────────────────────────────────── */
/* Base: applies to all natively focusable elements */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Pill-shaped buttons — tighter radius matches their shape */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.nav-cta:focus-visible {
  outline-radius: 40px;
  outline-offset: 4px;
}
/* Theme toggle — small circular button */
.theme-toggle:focus-visible {
  outline-offset: 5px;
  border-radius: 50%;
}
/* Text inputs and textareas — already have visible state, reinforce it */
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 0;
}

/* ─── CUSTOM CURSOR ─────────────────────────────────────────── */
#cursor {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: width 0.2s, height 0.2s, background 0.2s;
}
#cursor-ring {
  position: fixed;
  width: 32px; height: 32px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
}

/* ─── NOISE TEXTURE OVERLAY ─────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.3;
}

/* ─── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }


/* ─── KEYFRAMES ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}
@keyframes slowSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes slowSpinReverse {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}


/* ─── THEME TOGGLE BUTTON ──────────────────────────────────── */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
}
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: block; }


/* ─── NAV ───────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1160px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(8,8,15,0.75);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(200,169,110,0.16);
  border-radius: 50px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(200,169,110,0.06);
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
nav.scrolled {
  padding: 10px 28px;
  background: rgba(8,8,15,0.90);
  box-shadow: 0 6px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(200,169,110,0.08);
}

.nav-logo {
  font-family: 'Great Vibes', cursive;
  font-size: 1.65rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-links a {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold); }

.nav-cta {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--glass-border);
  padding: 8px 20px;
  border-radius: 40px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  flex-shrink: 0;
}
.nav-cta:hover {
  background: var(--gold);
  color: var(--void);
  border-color: var(--gold);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--muted);
  transform-origin: center;
  transition: background 0.25s, transform 0.32s var(--ease), opacity 0.25s ease;
}
.nav-hamburger:hover span { background: var(--gold); }

/* Open state — bars animate into X */
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
  background: var(--gold);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
  background: var(--gold);
}


/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--void);
  padding: 13px 30px;
  border-radius: 40px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s, transform 0.3s;
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }

.btn-ghost {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--glass-border);
  color: var(--muted);
  padding: 13px 30px;
  border-radius: 40px;
  text-decoration: none;
  display: inline-block;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, transform 0.3s;
}
.btn-ghost:hover { border-color: var(--gold-dim); color: var(--gold); transform: translateY(-2px); }


/* ─── SECTION UTILITIES ─────────────────────────────────────── */
section { position: relative; }

.section-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 48px;
}

/* Section tier utilities (Phase 1 — M1a)
   ────────────────────────────────────────
   Apply to the <section> element to set its tier weight.
   Dark/hero tiers re-scope --white, --muted, --border so any
   child component using those tokens reads on the dark field. */
.section--hero,
.section--dark-anchor {
  --white:  var(--section-text-on-dark);
  --muted:  var(--section-muted-on-dark);
  --border: var(--section-border-on-dark);
  --faint:  rgba(255,255,255,0.06);
  --glass:  rgba(255,255,255,0.035);
  color: var(--section-text-on-dark);
}
.section--hero        { background: var(--section-bg-hero); }
.section--anchor      { background: var(--section-bg-anchor); }
.section--supporting  { background: var(--section-bg-supporting); }
.section--dark-anchor { background: var(--section-bg-dark-anchor); }

/* Spacing rhythm — opt-in padding scale for the section wrap.
   Tight feels like prose, loose feels like a statement. */
.section--pad        > .section-wrap { padding-block: var(--section-pad-y); }
.section--pad-tight  > .section-wrap { padding-block: var(--section-pad-y-tight); }
.section--pad-loose  > .section-wrap { padding-block: var(--section-pad-y-loose); }

.section-label {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  max-width: 80px;
}

.section-title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: 0.03em;
  color: var(--white);
  margin-bottom: 14px;
}
.section-title em {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0;
}

.section-sub {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--muted);
  max-width: 560px;
  line-height: var(--lh-relaxed);
  margin-bottom: 52px;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--transition), transform 0.75s var(--transition);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ─── M4: SECTION DIVIDER ────────────────────────────────────
   A hairline at the top of every section that isn't the hero or
   a dark anchor (those have enough contrast contrast contrast to self-separate).
   Provides the "chapter break" visual rhythm without needing
   explicit full-width rules in the markup. */
.section--anchor   + .section--supporting,
.section--supporting + .section--anchor,
.section--supporting + .section--supporting {
  border-top: 1px solid var(--border);
}

/* Glow line separator */
.glow-line {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  margin: 20px 0;
  box-shadow: 0 0 10px rgba(200,169,110,0.45);
}


/* ─── FOOTER ────────────────────────────────────────────────── */
footer {
  background: var(--deep);
  border-top: 1px solid var(--border);
  padding: 32px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-logo {
  font-family: 'Great Vibes', cursive;
  font-size: 1.3rem;
  color: var(--gold);
  text-decoration: none;
}
.footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.6;
}
.footer-back-top {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s;
}
.footer-back-top:hover { color: var(--gold); }


/* ─── MOBILE NAV DROPDOWN ───────────────────────────────────── */
@keyframes menuFadeDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.nav-links.mobile-open {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: var(--mobile-menu-top, 76px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1160px;
  background: rgba(10,10,16,0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(200,169,110,0.14);
  border-radius: 24px;
  padding: 28px;
  gap: 22px;
  z-index: 199;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  animation: menuFadeDown 0.32s var(--transition) forwards;
}
html[data-theme="light"] .nav-links.mobile-open {
  background: var(--bg-overlay);
}
.nav-links.mobile-open a {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}
.nav-mobile-resume {
  font-family: 'DM Mono', monospace;
  font-size: 1.3rem !important;
  letter-spacing: 0.1em !important;
  color: var(--gold) !important;
  text-decoration: none;
  border-top: 1px solid rgba(200,169,110,0.14);
  padding-top: 16px;
  margin-top: 4px;
}


/* ─── ULTRAWIDE / 4K SUPPORT ────────────────────────────────── */
@media (min-width: 1920px) {
  .section-wrap { max-width: 1480px; }
}
@media (min-width: 2560px) {
  .section-wrap { max-width: 1680px; }
}

/* ─── RESPONSIVE (SHARED CHROME ONLY) ──────────────────────── */
@media (max-width: 1024px) {
  nav { padding: 18px 28px; }
  .section-wrap { padding: 80px 28px; }
}

@media (max-width: 640px) {
  nav { padding: 16px 20px; }
  nav .nav-links   { display: none; }
  nav .nav-actions { display: none; }
  .nav-hamburger   { display: flex; }
  .section-wrap { padding: 64px 20px; }
  footer { flex-direction: column; gap: 12px; text-align: center; padding: 28px 20px; }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Zero out transition durations globally */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elements appear immediately without sliding up */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Menu animation — instant */
  .mobile-menu.open { animation: none; }
}

/* ─── TOUCH / HOVER-NONE FALLBACKS ──────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Restore native cursor on touch devices */
  body        { cursor: auto; }
  #cursor,
  #cursor-ring { display: none; }
}